<template>
	<view class="login_pages">
		<view class="ipts">
			<input type="text" placeholder="请输入手机号" v-model="phoneNumber" />
		</view>
		<view class="ipts">
			<input type="number" placeholder="请输入短信验证码" />
			<text v-if="getCodeBtn" @click="getCodeFn">获取验证码</text>
			<text v-else>{{count}}</text>
		</view>
		<view class="login_btn">登录/注册</view>
	</view>
	
</template>

<script>
	import CodeFn from '../../request/fetch.js'
	export default {
		data() {
			return {
				getCodeBtn: true,
				count:60,
				phoneNumber:'',
			}
		},
		methods:{
			//点击获取验证码时触发
			getCodeFn(){
				let _this = this
				let result = this.validatePhone(this.phoneNumber)
				console.log("result" ,result)
				if(result) {
					CodeFn({
						phone: _this.phoneNumber
					}).then(res=>{
						
					})
					this.daojishiFn();
				}else{
					uni.showToast({
						icon: 'none',
						title: '请重新输入手机号'
					})
				}		
			},
			//封装一个倒计时函数
			daojishiFn() {
				// 验证成功 '获取验证码'隐藏  倒计时显示
				this.getCodeBtn == flase
				let timer = setInterval(()=>{
					count--
					if(count == 0){
						this.count = 60
						this.getCodeBtn == true
						clearInterval(timer)
					}
				},1000)
			},
			//校验手机号函数
			validatePhone(phone){
			    if (!(/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/.test(phone))) { 
			        return false; 
			    }else {
					return true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.login_pages {
	padding-top: 20vh;
	.ipts {
		width: 90%;
		border-bottom: 1rpx solid #000;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin: auto;
		margin-top: 54rpx;
		
		input {
			flex: 1
		}
		
		text {
			color:#007AFF;
		}
	}
	
	.login_btn {
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		background: #0A32BE;
		font-size: 30rpx;
		text-align: center;
		margin: auto;
		margin-top: 172rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
	}
}
</style>
